<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>


    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/Sellerber.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/font-awesome.min.css"/>

    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/bkg_ui.css"/>

    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/js/zh-cn.js"/>
    <style>

        .add_div {
            width: 400px;
            height: 500px;
            border: solid #ccc 1px;
            margin-top: 40px;
            margin-left: 170px;
            padding-left: 20px;
        }

        .file-list {
            height: 125px;
            display: none;
            list-style-type: none;
        }

        .file-list img {
            max-width: 70px;
            vertical-align: middle;
        }

        .file-list .file-item {
            margin-bottom: 10px;
            float: left;
            margin-left: 20px;
        }

        .file-list .file-item .file-del {
            display: block;
            margin-left: 20px;
            margin-top: 5px;
            cursor: pointer;
        }


    </style>
    <script src="../../common/js/jquery.min.js"></script>
    <script src="../../common/js/AjaxJson.js"></script>
    <script src="../../common/js/product_edit.js"></script>
</head>

<body>
<div class="page-container">
    <!--<form action="" method="post" class="form form-horizontal" id="form-article-add">-->
    <div class="row cl" style="margin-bottom:15px; border: 1px solid red">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>二维码：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%;border: 1px solid red;margin: auto">
            <input type="text" class="input-text" value="" id="productQR" readonly="readonly">
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>商品类型：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
				<span class="select-box">
				<select id="productType" class="select" disabled>
					<option value="0">请选择</option>
					<option value="按摩仪">按摩仪</option>
					<option value="听诊器">听诊器</option>
					<option value="助听器">助听器</option>
					<option value="功能床">功能床</option>
					<option value="拐杖">拐杖</option>
					<option value="轮椅">轮椅</option>
				</select>
			</span>
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>商品名称：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="text" class="input-text" value="" placeholder="" id="productName" readonly="readonly">
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>商品颜色：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="text" class="input-text" value="" placeholder="" id="productColor" readonly="readonly">
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>生产厂家：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="text" class="input-text" value="" placeholder="" id="productFactory" readonly="readonly">
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>数量：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="number" class="input-text" value="1" placeholder="" readonly id="productNumber"
                   style="width:100%">
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>租售信息：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%"> <span class="select-box">
				<select id="rsInfo" class="select" onchange="showChoose(this)">
					<option value="0">请选择</option>
					<option value="10">出租</option>
					<option value="1">出售</option>
					<option value="11">租售</option>
				</select>
				</span>
        </div>
    </div>
    <div class="row cl" id="rpInfo" style="display: none;margin-bottom: 15px;">
        <label class="form-label col-xs-4 col-sm-1">租价：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="tel" id="rentPrice" placeholder="" class="input-text" style="width:90%"> 元/天
        </div>
    </div>
    <div class="row cl" id="spInfo" style="display: none; margin-bottom: 15px;">
        <label class="form-label col-xs-4 col-sm-1">售价：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="text" id="salePrice" placeholder="" class="input-text" style="width:90%"> 元
        </div>
    </div>
    <div class="row cl" id="money" style="display: none; margin-bottom: 15px;">
        <label class="form-label col-xs-4 col-sm-1">押金：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width: 50%">
            <input type="text" id="rentMoney" placeholder="" class="input-text" style="width:90%"> 元
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px; ">
        <label class="form-label col-xs-4 col-sm-1">生产日期：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width:180px">
            <input type="date"
                   id="productDate" class="input-text Wdate" readonly>
        </div>
        <label class="form-label col-xs-4 col-sm-1">是否报废：</label>
        <div class="formControls col-xs-8 col-sm-9" style="width:180px">
            <input type="text" id="isBroken" placeholder="" class="input-text">
        </div>
    </div>
    <div class="row cl" style="margin-bottom:15px;">
        <label class="form-label col-xs-4 col-sm-1">商品摘要：</label>
        <div class="formControls col-xs-8 col-sm-9">
                <textarea id="introduction" class="textarea"
                          placeholder="说点什么...?"
                          datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！"
                          onKeyUp="$.Huitextarealength(this,200)"></textarea>
            <p class="textarea-numberbar"><em class="textarea-length">0</em>/20</p>
        </div>
    </div>
    <span id="reImg">

		</span>
    <div class="row cl" align="center" style="border: 1px solid red">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2" align="left" style="border: 1px solid red">
            <button id="update" href="javascript:;" class="btn btn-primary radius">
                &nbsp;&nbsp;更新&nbsp;&nbsp;
            </button>
            <button onclick="window.location.href = 'product-list.html'" class="btn btn-default radius" type="button">
                &nbsp;&nbsp;取消&nbsp;&nbsp;
            </button>
        </div>
    </div>
    <script>
        //10表示出租、1表示出售、11表示租售
        function showChoose(rsInfo) {
            var rpInfo = document.getElementById("rpInfo"); //出租
            var money = document.getElementById("money"); //押金
            var spInfo = document.getElementById("spInfo"); //出售
            rpInfo.style.display = (rsInfo.value == 10 || rsInfo.value == 11) ? "block" :
                "none";
            money.style.display = (rsInfo.value == 10 || rsInfo.value == 11) ? "block" :
                "none";
            spInfo.style.display = (rsInfo.value == 1 || rsInfo.value == 11) ? "block" :
                "none";
        }
    </script>

    <script src="../../layer/layer.js"></script>
    <script>
        var imgBase;
        var upImg = "";


        $(function () {

            //  alert("hahaha")
            ////////////////////////////////////////////////图片上传//////////////////////////////////////////////
            //声明变量
            var $button = $('#update'),
                //选择文件按钮
                $file = $("#choose-file"),
                //回显的列表
                $list = $('.file-list'),
                //选择要上传的所有文件
                fileList = [];
            //当前选择上传的文件
            var curFile;
            // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
            // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
            $file.on('change', function (e) {
                // alert("123");
                //上传过图片后再次上传时限值数量
                var numold = $('li').length;
                if (numold >= 6) {
                    layer.alert('最多上传6张图片');
                    return;
                }
                //限制单次批量上传的数量
                var num = e.target.files.length;
                var numall = numold + num;
                if (num > 6) {
                    layer.alert('最多上传6张图片');
                    return;
                } else if (numall > 6) {
                    layer.alert('最多上传6张图片');
                    return;
                }
                //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
                curFile = this.files;
                //curFile = $file.get(0).files;
                //console.log(curFile);
                //将FileList对象变成数组
                fileList = fileList.concat(Array.from(curFile));
                //console.log(fileList);
                for (var i = 0, len = curFile.length; i < len; i++) {
                    reviewFile(curFile[i])
                }
                $('.file-list').fadeIn(2500);
            });


            function reviewFile(file) {
                //实例化fileReader,
                var fd = new FileReader();
                //获取当前选择文件的类型
                var fileType = file.type;
                //调它的readAsDataURL并把原生File对象传给它，
                fd.readAsDataURL(file);//base64
                //监听它的onload事件，load完读取的结果就在它的result属性里了
                fd.onload = function () {
                    if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                        $list.append('<li style="border:solid red 0px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                    } else {
                        $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                    }

                }
            }

            //点击删除按钮事件：
            $(".file-list").on('click', '.file-del', function () {
                let $parent = $(this).parent();
                console.log($parent);
                let index = $parent.index();
                fileList.splice(index, 1);
                $parent.fadeOut(850, function () {
                    $parent.remove()
                });
            });
            //点击上传按钮事件：
            $button.on('click', function () {
                if ($("#rsInfo").val() == '0') {
                    alert("请选择租用类型！");
                    //  return ;
                } else {
                    var formData = new FormData();
                    if (fileList.length > 6) {
                        layer.alert('最多允许上传6张图片');

                    } else {
                        var file = fileList[0];
                        if (file) {

                            var reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onload = function (event) {
                                var imgBase64 = event.target.result;
                                upImg += imgBase64.split(',')[1];

                            };

                        }

                        for (var i = 0, len = fileList.length; i < len; i++) {
                            formData.append('upImg', fileList[i]);
                        }
                        formData.append('productQR', $("#productQR").val());
                        formData.append('productName', $("#productName").val());
                        formData.append('productNumber', $("#productNumber").val());
                        formData.append('productType', $("#productType").val());
                        formData.append('productColor', $("#productColor").val());
                        formData.append('productFactory', $("#productFactory").val());
                        formData.append('saleableInformation', $("#rsInfo").val());
                        formData.append('productDate', $("#productDate").val());
                        formData.append('salePrice', $("#salePrice").val());
                        formData.append('rentPrice', $("#rentPrice").val());
                        formData.append('rentMoney', $("#rentMoney").val());
                        formData.append('isBroken', $("#isBroken").val());
                        formData.append('state',0);
                        formData.append('introduction', $("#introduction").val());
                        //formData.append('upImg', upImg);
                        $.ajax({
                            url: 'productInfo!update',
                            type: 'post',
                            data: formData,
                            processData: false,
                            contentType: false, //缺失会出现URL编码，无法转成json对象
                            success: function (data) {
                                window.location.href = "product-list.html";
                                alert("更新成功！");

                            },
                            error: function (data) {
                                window.location.href = "product-list.html";
                                alert("更新失败！");
                            }
                        });
                    }
                }

            });


        });

    </script>
</div>
</body>
</html>